<template>
  <a-modal
    title="推送注册证"
    :width="800"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="confirmLoading"
    @cancel="close"
  >
    <template slot="footer">
      <a-button key="ok" type="primary" @click="handleOk">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div class="modal-operations">
        <!-- <a-button type="primary" icon="plus" @click="handleAddPersonModal()">添加新人员</a-button> -->
      </div>
      <a-transfer
        class="atransfer"
        showSearch
        :dataSource="customers"
        :titles="['全部客户', '已推送客户']"
        :targetKeys="pushedCustomers"
        :selectedKeys="selectedKeys"
        @change="handleChange"
        @selectChange="handleSelectChange"
        @scroll="handleScroll"
        :render="item=>item.title"
        :listStyle="{
          width: '320px',
          height: '350px',
        }"
      />
      <!-- <person-modal ref="PersonModal" @ok="handlePersonModalOk" /> -->
    </a-spin>
  </a-modal>
</template>

<script>
import { getByConditions as getCustomer } from '../customer/customer'
import { getpushedByConditions as getPushedCustomer, pushRegisLicense } from './regisLicense'

export default {
  name: 'pushRegisLicenseModal',
  components: {
  },
  props: {
  },
  data () {
    // const mockData = []
    // for (let i = 0; i < 20; i++) {
    //   mockData.push({
    //     key: i.toString(),
    //     title: `content${i + 1}`,
    //     description: `description of content${i + 1}`,
    //     disabled: i % 3 < 1
    //   })
    // }
    // const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key)
    return {
      customers: [],
      pushedCustomers: [],
      selectedKeys: [], // 选中数组
      visible: false,
      zhuCezPid: '',
      zhengZhaohm:'',
      confirmLoading: true
    }
  },
  beforeCreate () {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    filterOption (inputValue, option) {
      console.log(inputValue, option)
    },
    showModal (zhuCezPid,zhengZhaohm) {
      this.visible = true
      this.getAllCustomers()
      this.zhuCezPid = zhuCezPid
      this.zhengZhaohm = zhengZhaohm
      this.getPushedCustomers(zhuCezPid)
    },
    // 得到所有客户
    async getAllCustomers () {
      this.customers = []
      const customerPa = {}
      const res = await getCustomer(customerPa, {});
      if (res && res.code && res.code === 'C1' && res.data) {
        for (let i = 0; i < res.data.length; i++) {
          const member = {
            // key: res.data[i].keHuOrgPid,z/z
            key: res.data[i].keHuOrgPid,
            title: res.data[i].keHumc + "(" + res.data[i].keHudm + ")"
          }
          this.customers.push(member)
        }
      }
      console.log('customers', this.customers)
    },
    // 得到已推送客户（状态是已推送）
    async getPushedCustomers (zhuCezPid) {
      this.pushedCustomers = []
      const customerPa = {
        zhuCezPid: zhuCezPid
      }
      const pagination = {
        pageSize: 10000,
        currentPage: 1,
        sidx: "",
        order: "0"
      }
      const res = await getPushedCustomer(customerPa,pagination, {})
      if (res && res.code && res.code === 'C1' && res.data) {
        for (let i = 0; i < res.data.length; i++) {
          // const member = {
          //   key: res.data[i].keHuOrgPid,
          //   title: res.data[i].keHumc + "(" + res.data[i].keHudm + ")"
          // }
          this.pushedCustomers.push(res.data[i].keHuOrgPid)
        }
      }
      this.confirmLoading = false
      console.log('pushedCustomers', this.pushedCustomers)
    },
    // 关闭
    close () {
      this.$emit('close')
      this.visible = false
    },
    // 保存
    handleOk () {
      this.close()
    },
    handleCancel () {
      this.visible = false
    },
    // 改变
    async handleChange (nextTargetKeys, direction, moveKeys) {
      if (moveKeys.length > 0 && direction === 'right') {
        for (let i = 0; i < moveKeys.length; i++) {
          const departMember = {
            newOrgPid: moveKeys[i],
            pid: this.zhuCezPid
          }
          const res = await pushRegisLicense(departMember)
          let pushItem=this.customers.find(item=>{return moveKeys[i]==item.key})
          if (res && res.code && res.code === 'C1' && res.data) {
            this.pushedCustomers.push(moveKeys[i])
            this.$message.success({ content:'证照'+this.zhengZhaohm+'已成功推送给'+pushItem.title, duration: 3 })
          }else{
            this.$message.error({ content:'证照'+this.zhengZhaohm+'无法推送给'+pushItem.title+'，失败原因：'+res.message, duration: 3 })
          }
        }
      }
      if (moveKeys.length > 0 && direction === 'left') {
        // for (let i = 0; i < moveKeys.length; i++) {
        //   const departMember = {
        //     personPid: moveKeys[i],
        //     deptPid: this.deptPid
        //   }
        //   delDepartMember(departMember, {}).then(res => {
        //     this.customers.push(res.data.personPid)
        //     this.departMembers = nextTargetKeys
        //   })
        // }
      }
    },
    // 选中列表
    handleSelectChange (sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]

      // console.log('sourceSelectedKeys: ', sourceSelectedKeys)
      // console.log('targetSelectedKeys: ', targetSelectedKeys)
    },
    handleScroll (direction, e) {
      // console.log('direction:', direction)
      // console.log('target:', e.target)
    },
    handleDisable (disabled) {
      // this.disabled = disabled
    }
  }
}
</script>

<style lang="less">
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .modal-operations {
    margin-bottom: 16px;
    text-align: left;
  }
  .modal-operations > button {
    margin-left: 10px;
  }
  
  .atransfer .ant-transfer-list:last-child .ant-transfer-list-content-item{
    pointer-events: none;
    cursor:not-allowed;
  }
  .atransfer .ant-transfer-list:last-child .ant-transfer-list-header{
    pointer-events: none;
    cursor:not-allowed;
  }
  .atransfer .ant-transfer-list:last-child .ant-checkbox-inner{
    visibility:hidden ;
    pointer-events: none;
    cursor:not-allowed;
  }
  .atransfer .ant-transfer-operation .ant-btn-icon-only:last-child{
    visibility:hidden ;
  }
</style>
